<template>

        <div class="scroll-content">
         
          <h1 class="headline">
            <span class="accent">演示</span> 图标选择
          </h1>
          <p class="description">当前路由：{{ route.fullPath }}</p>
          
          <p>以下是一些常用图标，方便在前端界面开发中快速选取：</p>
          <div
            style="
              width: 95%;
              color: #666;
              font-size: 36px;
              display: flex;
              align-items: center;
              flex-wrap: wrap;
              justify-content: left;
              gap: 15px;
            "
          >
            <SettingOutlined /><ScanOutlined /> <MailOutlined /> <ContactsOutlined />
            <ClockCircleOutlined /><SyncOutlined /> <LockOutlined />
            <FlagOutlined /> <BookOutlined /> <LaptopOutlined />
            <UserOutlined /> <VideoCameraOutlined /> <CloudUploadOutlined />
            <UploadOutlined /> <MessageOutlined /> <BellOutlined />
            <HomeOutlined /> <MenuFoldOutlined /> <MenuUnfoldOutlined />
            <CompressOutlined /><NotificationOutlined /><FullscreenExitOutlined />
            <ExclamationCircleOutlined /><TrophyOutlined /><InboxOutlined />
            <EyeInvisibleOutlined /> <EyeOutlined /> <WechatOutlined /> <AppstoreOutlined /> <AppstoreAddOutlined />
            <MobileOutlined /> <TeamOutlined /> <ShareAltOutlined /> <PoweroffOutlined />
            <HeartOutlined /><DeleteOutlined /><RedEnvelopeOutlined /><LeftOutlined />
            <ReadOutlined /><SearchOutlined /><CustomerServiceOutlined /><QuestionCircleOutlined />
            <ClearOutlined /><QrcodeOutlined /><MoneyCollectOutlined /> <WindowsOutlined />
            <CheckOutlined /><FormOutlined /><EnvironmentOutlined />
            <CloudOutlined /><CloudUploadOutlined /> <CloseSquareOutlined />
            <CloudDownloadOutlined /><CloudServerOutlined /><CloseOutlined />
          </div>
          <p>
            如果不够，您也可以到「<a
              href="https://www.antdv.com/components/icon-cn"
              target="_blank"
              >Antdv Icons</a
            >」组件库查找。
          </p>
        </div>
</template>

<script setup>
import { ref } from 'vue';
import {
  UserOutlined,CloseSquareOutlined,CloseOutlined,
  VideoCameraOutlined,
  MailOutlined,ContactsOutlined,
  LaptopOutlined,WindowsOutlined,
  TeamOutlined,
  HeartOutlined,
  RedEnvelopeOutlined,
  ScanOutlined,AppstoreOutlined,AppstoreAddOutlined,
  UploadOutlined,
  BellOutlined,
  HomeOutlined,
  CompressOutlined,
  ShareAltOutlined,
  ClearOutlined,
  LeftOutlined,
  TrophyOutlined,
  NotificationOutlined,
  FullscreenExitOutlined,
  ReadOutlined,  
  DeleteOutlined,
  FormOutlined,PoweroffOutlined, 
  ExclamationCircleOutlined,
  SearchOutlined,
  SyncOutlined,
  QrcodeOutlined,
  CustomerServiceOutlined,
  CheckOutlined,
  MessageOutlined,
  LockOutlined,
  ClockCircleOutlined,
  FlagOutlined,
  MoneyCollectOutlined,
  QuestionCircleOutlined,
  MenuUnfoldOutlined,
  BookOutlined,
  MobileOutlined,
  CloudOutlined,
  EnvironmentOutlined,
  InboxOutlined,
  CloudUploadOutlined,
  CloudDownloadOutlined,
  CloudServerOutlined,
  SettingOutlined,
  MenuFoldOutlined,
  EyeOutlined,
  EyeInvisibleOutlined,
  WechatOutlined,
} from "@ant-design/icons-vue";

import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();



const goHome = () => {
  router.push({ name: "首页入口", params: {} }); 
};

</script>

<style lang="less" scoped>

.scroll-content {
  height: 100% ;
  margin-right: 5px;
  padding: 10px 30px 30px 20px;
  box-sizing: border-box;
  overflow: auto; 
}
@media (min-width: 960px) and (max-width: 1299px) {
  .scroll-content {
    padding: 20px 40px 30px 30px;
  }
}
@media (min-width: 1300px) {
  .scroll-content {
    padding: 30px 50px 30px 50px;
  }
}

.scroll-content::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 轨道的背景颜色 */
  border-radius: 10px; /* 轨道的圆角 */
}
.scroll-content::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
  border: 2px solid #ffffff;
}
.scroll-content::-webkit-scrollbar {
  width: 10px;
}
html:not(.dark) .accent,
.dark .headline {
  background: -webkit-linear-gradient(315deg, #42d392 25%, #647eff);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

p {
  line-height: 1.8;
  margin-top: 10px;
}
.headline {
  font-size: 32px;
  line-height: 1.9;
  font-weight: bold;
  letter-spacing: -1.5px;
  margin: 0px auto;
}

.subtitle {
  line-height: 1.5;
  color: var(--vt-c-text-2);
  transition: color 0.5s;
  font-size: 22px;
  margin: 44px auto 16px;
}


</style>
